<template>
  <div class="pie-wrap">
    <div id="journeyStep5Chart5" ref="charts10" style="height: 400px;"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var option = {
          title: {
            text: '',
            subtext: '',
            left: 'left',
            top: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}"
          },

          calculable: false,
          series: [
            {
              color: '#beec9f',
              name: '悲观',
              type:'funnel',
              width: '40%',
              height: '45%',
              //left: '30%',
              left:'30%',
              top: '5%',
              label: {
                normal: {
                  position: 'left'
                }
              },
              data:[
                {value: 26, name: '绝望'},
                {value: 32, name: '抑郁'},
                {value: 55, name: '恐惧'},
                {value: 121, name: '担忧'}
              ]
            },
            {
              color: '#317267',
              name: '乐观',
              type:'funnel',
              width: '40%',
              height: '45%',
              left: '30%',
              top: '50%',
              sort: 'ascending',
              label: {
                normal: {
                  position: 'left'
                }
              },
              data:[
                {value: 55, name: '积极'},
                {value: 40, name: '奋发'},
                {value: 20, name: '希望'},
                {value: 14, name: '渴望'}
              ]
            }
          ]
        };

        var mycharts = this.$echarts.init(this.$refs.charts10)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style>
  .pie-wrap{
    position: relative;
  }
  .pie-wrap .pie-count{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 170px;
    height: 80px;
    top: 160px;
    left: 50%;
    margin-left: -85px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }
</style>
